<template>
  <van-popup v-model:show="show" position="bottom">
    <van-date-picker
      v-model="currentDate"
      title="选择日期"
      :min-date="minDate"
      :formatter="formatter"
      :max-date="maxDate"
      @confirm="toConfirm"
      @cancel="toClose"
    />
  </van-popup>
</template>

<script lang="ts" setup>
// import dayjs from 'dayjs'

const show = ref(false)
const now = new Date()
const changeStr = ref('')
const currentDate = ref([
  now.getFullYear().toString(),
  (now.getMonth() + 1).toString(),
  now.getDate().toString(),
])

interface IpickConfig {
  changeStr: string
  currentDate: any
  minDate?: Date
  maxDate?: Date
}

const formatter = (type: any, option: any) => {
  if (type === 'year') {
    option.text += '年'
  }
  if (type === 'month') {
    option.text += '月'
  }
  if (type === 'day') {
    option.text += '日'
  }
  return option
}

const openPick = (data: IpickConfig) => {
  show.value = true
  changeStr.value = data.changeStr
  if (data.currentDate) {
    const year = data.currentDate.year() // 获取年份
    const month = data.currentDate.month() + 1 // 获取月份
    const day = data.currentDate.date() // 获取日
    currentDate.value = [year, month, day]
  }
}

const props = defineProps({
  minDate: {
    type: Date,
    defaulut: null,
  },
  maxDate: {
    type: Date,
    defaulut: null,
  },
})

const toConfirm = (info: any) => {
  // console.log('--查看参数date', info)
  const str = `${info.selectedValues[0]}-${info.selectedValues[1]}-${info.selectedValues[2]}`
  eimits('confirm', {
    data: str,
    changeStr: changeStr.value,
  })
  show.value = false
}

const toClose = () => {
  show.value = false
}

const eimits = defineEmits(['confirm'])

defineExpose({
  openPick,
})
</script>

<style lang="scss" scoped></style>
